<template>
  <div class="main supper-manage">
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-plus" class="filter-item" @click="chooseGoods">添加碧划算商品</el-button>
    </div>
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间">
        <el-table-column align="center" label="序号" type="index" width="55"></el-table-column>
        <el-table-column align="center" label="类型" prop="goodTypeDesc"></el-table-column>
        <el-table-column align="center" label="商品名称" prop="title"></el-table-column>
        <el-table-column align="center" label="券后价" prop="actualPrice"></el-table-column>
        <el-table-column align="center" label="佣金比例" prop="commissionRate"></el-table-column>
        <el-table-column align="center" label="优惠券剩余" prop="couponRemainCount"></el-table-column>
        <el-table-column align="center" label="分享基数">
          <template slot-scope="scope">
            <el-form :model="scope.row" :ref="`form${scope.row.goodsId}`" label-width="0px">
              <el-form-item prop="baseShareCount" :show-message="false" required>
                <el-input v-model="scope.row.baseShareCount" @input="scope.row.baseShareCount=$event.replace(/[^\d]/g,'')" style="width: 100%;"></el-input>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status===1?'有效':'失效'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @input="scope.row.sort=$event.replace(/[^\d]/g,'')" style="width: 100%;"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="delItem(scope.$index)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; padding: 20px">
        <el-button type="success" @click="save">保 存</el-button>
      </div>
    
  </div>
</template>
<script>
  export default {
    name: 'b-superManage',
    props: {
      id: {
        default: ''
      }
    },
    data () {
      return {
        listLoading: false,
        listQuery: {
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        form: {
          activityGoodsList: [],
          goodsAttr: [],
        },
        tempGoodsCheck: []
      }
    },
    activated () {
      this.getList();
    },
    methods: {
      getList () {
        this.listLoading = true;
        this.request({
          url: '/bihs/super-hot/goods/search-no-page',
          method: 'post',
          data: {
            // ...this.listQuery,
            hotId: this.id
          }
        }).then(({data}) => {
            this.list = data
            this.listLoading = false
          }).catch(err => {
            console.log(err);
            this.list = []
            this.listLoading = false
          })
      },
      // 选择商品
      chooseGoods () {
        let selected = this.list.map(item => {
          return {
            goodsId: item.goodsId,
            goodTypeDesc: '碧划算',
            title: item.title,
            actualPrice: item.actualPrice,
            commissionRate: item.commissionRate,
            couponRemainCount: item.couponRemainCount,
            baseShareCount: item.baseShareCount ? item.baseShareCount : 0,
            status: 1,
            type: 2,
            sort: item.sort
          }
        });
        this.bhsGoodsChoose(2, selected, true).then(async val => {
          try {
            let list = this.list.filter(item=>item.type===2).concat(val.map(item => {
              return {
                goodsId: item.goodsId,
                goodTypeDesc: '碧划算',
                title: item.title,
                actualPrice: item.actualPrice,
                commissionRate: item.commissionRate,
                couponRemainCount: item.couponRemainCount,
                baseShareCount: item.baseShareCount ? item.baseShareCount : 0,
                status: 1,
                type: 1,
                sort: item.sort
              }
            }))
            this.list = Array.from(new Set(list))
          } catch (error) {
            this.$message.error('操作失败')
            console.log(error)
          }
        })
      },
      delItem (index) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list.splice(index, 1)
          this.$message.success('删除成功')
        }).catch(err => {
          console.log(err)
        })
      },
      async save () {
        if (this.list.length === 0) {
          this.$message.warning('请添加碧划算商品')
          return
        }
        let arrMap = this.list.map((item, index) => {
          if (this.$refs[`form${item.goodsId}`]) {
            return this.$refs[`form${item.goodsId}`].validate().catch(err=>{ console.log(err) })
          }
        })
        // let sortMap = this.list.map((item, index) => {
        //   if (this.$refs[`sort${item.goodsId}`]) {
        //     return this.$refs[`sort${item.goodsId}`].validate().catch(err=>{ console.log(err) })
        //   }
        // })
        let resultArr = await Promise.all(arrMap)
        // let sortArr = await Promise.all(sortMap)
        if (resultArr.indexOf(undefined) === -1) {
          this.request({
            url: '/bihs/super-hot/goods/add',
            method: 'post',
            data: {
              hotGoods: this.list,
              hotId: this.id
            }
          }).then(() => {
            this.$message.success('保存成功')
            this.getList()
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.error('请输入分享基数')
        }
      }
    }
  }
</script>
<style lang="scss" scope>
  .supper-manage {
    .el-form-item {
      margin-bottom: 0;
    }
  }
</style>